<template>
  <cross-line :text="$t('lang.form.inviocesStatus')" v-model:visible="visible" />
  <el-descriptions :column="4" v-show="visible">
    <el-descriptions-item :label="$t('lang.form.creator')">{{ data.creatorname }}</el-descriptions-item>
    <el-descriptions-item :label="$t('lang.form.createDate')">{{ data.createDate }}</el-descriptions-item>
    <el-descriptions-item :label="$t('lang.form.modifiername')">{{ data.modifiername }}</el-descriptions-item>
    <el-descriptions-item :label="$t('lang.form.updateDate')">{{ data.updateDate }}</el-descriptions-item>
    <el-descriptions-item :label="$t('lang.form.dataStatus')">{{ data.statusName }}</el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts">
import { ObjectType } from 'typings/interfaces'
import { defineComponent, PropType, ref } from 'vue'
import CrossLine from './CrossLine.vue'

// interface Data extends ObjectType {
//   creatorname: string
//   createDate: string
//   modifiername: string
//   updateDate: string
//   statusName: string
// }

export default defineComponent({
  name: 'Invoices',
  props: {
    data: {
      type: Object as PropType<ObjectType>,
      required: true,
    },
  },
  components: {
    CrossLine,
  },
  setup() {
    const visible = ref(true)
    return {
      visible,
    }
  }
})
</script>
